<template>
  <div class="order">
    <tm-navbar color="orange" title="订单" linear="right">
      <template v-slot:left>生成订单</template>
    </tm-navbar>
    <tm-sheet>
      <div>提货点：{{ leaderAddressVolistdetailAddress }}</div>
    </tm-sheet>
    <tm-sheet>
      <tm-card title="提货人联系方式" :margin="[0, 1, 0, 0]">
        <template v-slot:content>
          <input
            placeholder="请输入提货人姓名"
            v-model.lazy="leaderAddressVolistleaderName"
            :inputPadding="[280, 10]"
          />
          <hr />
          <input
            placeholder="请输入提货人电话"
            v-model.lazy="leaderAddressVolistleaderPhone"
            :inputPadding="[280, 10]"
            type="number"
          />
        </template>
      </tm-card>
    </tm-sheet>
    <!-- 活动列表 -->
    <tm-sheet>
      <div v-for="(item, index) in carInfoVoListlist" :key="index">
        <tm-card :title="item.activityRule[1].ruleDesc" :margin="[0, 1, 0, 0]">
          <template v-slot:content>
            <div
              v-for="cartInfo in item.cartInfoList"
              :key="cartInfo._id"
              style="display: flex; justify-content: space-between; align-items: center; padding: 10px"
            >
              <div :class="cartInfo.isChecked == 1 ? 'block' : 'none'">
                <tm-image :preview="true" :width="130" :height="130" :src="cartInfo.imgUrl"></tm-image>
              </div>
              <div style="margin-left: 20px" :class="cartInfo.isChecked == 1 ? 'block' : 'none'">
                <p>{{ cartInfo.skuName }}</p>
                <p>购买数量:{{ cartInfo.skuNum }}</p>
                <p style="color: red">￥{{ cartInfo.cartPrice }}</p>
              </div>
            </div>
          </template>
        </tm-card>
      </div>
    </tm-sheet>
    <!-- 购物车列表 -->
    <tm-sheet>
      <div v-for="shop in shoplist" :key="shop._id" style="display: flex; padding: 10px">
        <div>
          <tm-image :preview="true" :width="130" :height="130" :src="shop.skuId.imgUrl"></tm-image>
        </div>
        <div style="margin-left: 20px">
          <p>{{ shop.skuId.skuName }}</p>
          <p>购买数量:{{ shop.skuNum }}</p>
          <p style="color: red">￥{{ shop.skuId.marketPrice }}</p>
        </div>
        <tm-divider align="left" color="blue"></tm-divider>
      </div>
    </tm-sheet>
    <tm-sheet>
      <div v-for="item in couponInfoListlist" :key="item._id" style="height: 20vh">
        <Coupon :item="item" @apply="apply"></Coupon>
      </div>
    </tm-sheet>
    <div
      style="
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: space-between;
        background-color: rgb(254, 254, 253);
      "
    >
      <div style="padding: 10px">
        <div style="color: red; font-size: 20px">现价：￥{{ cartprice + shoprice - amount }}</div>
        <div style="color: hotpink; font-size: 16px">
          {{ `已优惠:￥${amount > 0 ? amount : 0}元,原价${cartprice + shoprice}` }}
        </div>
      </div>
      <div style="padding: 10px">
        <tm-Button :width="200" :height="80" @click="generate">订单生成</tm-Button>
      </div>
    </div>
    <div>
      <!-- <tm-message :ref="msg" :lines="2"></tm-message> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmNavbar from '@/tmui/components/tm-navbar/tm-navbar.vue'
import tmButton from '@/tmui/components/tm-button/tm-button.vue'
import tmCard from '@/tmui/components/tm-card/tm-card.vue'
import tmMessage from '@/tmui/components/tm-message/tm-message.vue'
import tmImage from '@/tmui/components/tm-image/tm-image.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'

import { cartApi, gatorderapi, generateapi } from '@/api'
import Coupon from '@/components/Coupon/coupon.vue'
const CouponId = ref<number>() //优惠卷id
const amount = ref<number>(0) //减少金额

//提货列表
interface orderface {
  detailAddress: string
  distance: string
  id: number
  latitude: number
  leaderId: number
  leaderName: string
  leaderPhone: string
  longitude: number
  regionName: string
  storePath: string
  takeName: string
  userId: number
  _id: string
}
const leaderAddressVolist = ref<orderface>() //提货表
const leaderAddressVolistdetailAddress = ref<string>('') //提货地点
const leaderAddressVolistleaderName = ref<string>('') //提货姓名
const leaderAddressVolistleaderPhone = ref<number | undefined>() //提货电话

const carInfoVoListlist = ref<any>() //活动商品+活动
interface couponInfo {
  amount: number
  couponStatus: number
  couponType: string
  endTime: string
  expireTime: string
  id: number
  isOptimal: string
  isSelect: number
  perLimit: string
  rangeDesc: string
  rangeType: string
  startTime: string
  _id: string
}
interface cartInfoLists {
  cartPrice: number
  imgUrl: string
  isChecked: number
  isNewPerson: number
  skuId: number
  skuName: string
  skuNum: number
  skuType: number
  _id: string
}
const cartInfoList = ref<cartInfoLists[]>([])
const couponInfoListlist = ref<couponInfo[]>([]) //优惠卷
const leaderAddressVolistleaderleaderId = ref<number>() //领导id
const leaderAddressVolistleaderorderNo = ref<number>() // 订单号

const gatorder = async (): Promise<void> => {
  const res: any = await gatorderapi()

  leaderAddressVolist.value = res.leaderAddressVo
  leaderAddressVolistdetailAddress.value = res.leaderAddressVo.detailAddress
  leaderAddressVolistleaderleaderId.value = res.leaderAddressVo.leaderId // 领导id

  couponInfoListlist.value = res.couponInfoList //优惠卷
  res.couponInfoList.filter((item: any) => {
    if (item.isSelect == 0) {
      CouponId.value = item._id
      amount.value = item.amount
    }
  })

  carInfoVoListlist.value = res.carInfoVoList //商品+活动

  cartInfoList.value = res.carInfoVoList[0].cartInfoList //购物车列表
  leaderAddressVolistleaderorderNo.value = res.orderNo //订单号
}

//活动价格
const cartprice = computed(() => {
  let price: number = 0
  cartInfoList.value.forEach((item: any) => {
    if (item.isChecked == 1) {
      price += item.cartPrice * item.skuNum
    }
  })
  return price
})

//提交订单
const generate = async (): Promise<void> => {
  // const couponid = parseFloat()
  const Pthon = parseInt(leaderAddressVolistleaderPhone.value)
  const data = new Date()
  const ordertime: string =
    data.getFullYear() +
    '-' +
    (data.getMonth() - 1) +
    '-' +
    data.getDate() +
    '  ' +
    data.getHours() +
    ':' +
    data.getSeconds() +
    ':' +
    data.getMinutes()
  console.log(ordertime)

  if (leaderAddressVolistleaderName.value != '' && leaderAddressVolistleaderPhone.value) {
    console.log(CouponId.value)
    const obj: any = {
      ordertime,
      couponId: CouponId.value,
      leaderId: leaderAddressVolistleaderleaderId.value,
      orderNo: leaderAddressVolistleaderorderNo.value,
      receiverName: leaderAddressVolistleaderName.value,
      receiverPhone: Pthon,
    }
    generateapi(obj)

    uni.navigateTo({
      url: '/pages/detail/index',
    })
  } else {
    console.log('手机号和姓名不能为空')
  }
}

const apply = async (item: any): Promise<void> => {
  CouponId.value = item._id
  amount.value = item.amount

  gatorder()
}
onMounted(() => {
  gatorder(), shopget()
})

// 购物车列表
const shoplist = ref<any>([]) //购物车
const shop = ref<any>([])
const shopget = async (): Promise<void> => {
  const res = await cartApi()
  shop.value = res
  shoplist.value = shop.value.filter((item: any) => item.skuId.isChecked == 1)
}
//购物车
const shoprice = computed(() => {
  let price: number = 0
  shoplist.value.forEach((item: any) => {
    if (item.skuId.isChecked === 1) {
      price += item.skuId.marketPrice * item.skuNum
    }
  })

  return price
})
</script>

<style lang="scss">
.order {
  background-color: rgb(242, 244, 244);
}
.block {
  display: block;
}
.none {
  display: none;
}
</style>
